import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input, Radio, TreeSelect, Select, Row, Col, Button, Table } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

class ShowResourceGroupViewModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if (values.resourceGroupAssets) {
          for (var i = 0; i < values.resourceGroupAssets.length > 0; i++) {
            values.resourceGroupAssets[i].assetId = values.resourceGroupAssets[i].assetId_;
          }
          onOk(values);
        } else {
          Modal.warning({
            title: '提示',
            content: '请添加设备',
          })
        }
      }
    });
  };

  render() {

    const { children, user, dispatch, item, ipParamIdList, viewList, } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout2 = {
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
    };
    const formItemLayout1 = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const formItemLayout3 = {
      labelCol: { span: 9 },
      wrapperCol: { span: 15  },
    };

    const getIpParam = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.networkName}</Option>
    })

    const onAddDetail = () => {
      this.props.form.validateFields((err, values) => {
        if (!err) {
          dispatch({
            type: 'resourceGroup/queryAssetList',
            payload: values,
          })
        }
      });
    }
    const columns = [{
      title: '资产编号',
      dataIndex: 'assetNo',
      key: 'assetNo',
      fixed: 'left',
      width: 120
    }, {
      title: '资产分类',
      dataIndex: 'typeName',
      key: 'typeName',
      width: 120
    }, {
      title: '设备名称',
      dataIndex: 'assetName',
      key: 'assetName',
      width: 120
    }, {
      title: '品牌',
      dataIndex: 'brandName',
      key: 'brandName',
      width: 120,
    }, {
      title: '设备型号',
      dataIndex: 'modelName',
      key: 'modelName',
      width: 100,
    }, {
      title: '设备序列号',
      dataIndex: 'serialNo',
      key: 'serialNo',
      width: 120,
    }, {
      title: 'RFID编码',
      dataIndex: 'rfidNo',
      key: 'rfidNo',
      width: 100,
    }, {
      title: '状态',
      dataIndex: 'statusName',
      key: 'statusName',
      width: 60,
    }, {
      title: '所在机房',
      dataIndex: 'roomName',
      key: 'roomName',
      width: 100,
    }, {
      title: '所在机柜',
      dataIndex: 'rackName',
      key: 'rackName',
      width: 100,
    }, {
      title: '起始U位',
      dataIndex: 'startU',
      key: 'startU',
      width: 70,
    }, {
      title: '购置时间',
      dataIndex: 'buyTime',
      key: 'buyTime',
      width: 150,
    }, {
      title: '维保结束日期',
      dataIndex: 'expirationTime',
      key: 'expirationTime',
      width: 150,
    }
    ];
    return (
      <span>
        <Modal
          maskClosable={this.props.maskClosable}
          confirmLoading={this.props.confirmLoading}
          title={this.props.title}
          visible={this.props.visible}
          width={1000}
          footer={[
            <Button key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
          ]}
          onCancel={this.props.onCancel}
          key={this.props.newKey}
        >
          <div style={{ backgroundColor: '#fff' }}>
            <div style={{}}>
              <div style={{ width: '100%', backgroundColor: '#fff', paddingLeft: '20px' }}>
                <Form layout={'inline'}>
                  <Row gutter={4}>
                    <Col span={6}>
                      <FormItem
                        label="名称"
                        hasFeedback
                        {...formItemLayout2}
                      >
                        {
                          getFieldDecorator('groupName', {
                            initialValue: item.groupName + '',
                          })(<Input readOnly="readonly" style={{ width: 160 }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={6}>
                      <FormItem
                        label="ip地址"
                        hasFeedback
                        {...formItemLayout1}
                      >
                        {
                          getFieldDecorator('ip', {
                            initialValue: item.ip + '',
                          })(<Input readOnly="readonly" style={{ width:160 }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={6}>
                      <FormItem
                        label="安全网关"
                        hasFeedback
                        {...formItemLayout3}
                      >
                        {
                          getFieldDecorator('manageIp', {
                            initialValue: item.manageIp + '',
                          })(<Input readOnly="readonly" style={{ width: 160 }} />)
                        }
                      </FormItem>
                    </Col>
                    <Col span={6}>
                      <FormItem
                        label="IP参数"
                        hasFeedback
                        {...formItemLayout1}
                      >
                        {getFieldDecorator('networkName', {
                            initialValue: item.networkName + '',
                          })(<Input readOnly="readonly" style={{ width: 140 }} />)
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '20px' }}>
                    <Col span={24}>
                      <FormItem
                        label="备注"
                        hasFeedback
                      >
                        {
                          getFieldDecorator('remark', {
                            initialValue: item.remark + '',
                          })(<Input readOnly="readonly" style={{ width: '890px' }} type="textarea" autosize={{ minRows:3, maxRows: 3 }} />)
                        }
                      </FormItem>
                    </Col>
                  </Row>
                  <Row style={{ marginTop: '15px' }}>
                    <Col span={24}>
                      <hr style={{ width: '926px', height: '0px', borderTop: '1px solid #e9e9e9', borderRight: '0px', borderBottom: '0px', borderLeft: '0px' }} />
                    </Col>
                  </Row>

                  <div style={{}}>
                    <div style={{ width: '100%', padding: "10px 20px 20px 0px" }}>
                      <Table columns={columns}
                        rowKey={record => record.id_}
                        dataSource={viewList}
                        pagination={false}
                        scroll={{ x: 1600 }}
                      />
                    </div>
                  </div>
                </Form>
              </div>
            </div>
          </div>
        </Modal>
      </span>
    );
  }

}

export default Form.create()(ShowResourceGroupViewModal)
